<template>
  <div class="box padd10">
    <div class="left">
      <!-- 输入盒子 -->
      <div class="intBox padd10">
        <div class="item">
          <span class="info">姓名</span>
          <input type="text" id="name" v-model.trim="name" />
        </div>
        <div class="item">
          <span class="info">评分</span>
          <input type="number" id="score" v-model.number="score" />
        </div>
        <div class="item">
          <span class="info">薪资</span>
          <input type="number" id="money" v-model.number="salary" />
        </div>
        <div class="btn" id="add" @click="add">新增</div>
      </div>
      <!-- 列表 -->
      <div class="list">
        <div class="title">
          <span class="item">姓名</span>
          <span class="item">评分</span>
          <span class="item">薪资（单位:万）</span>
          <span class="item">操作</span>
        </div>
        <div class="listBox" id="list">
          <!-- editMode： 如果将来需要编辑，就应该添加editMode类型 -->

          <div
            class="one"
            v-for="item in list"
            :class="{ editMode: currentId === item.id }"
            :key="item.id"
          >
            <span class="item">
              <span class="info">{{ item.name }}</span>
              <input type="text" class="ipt" v-model="item.name" />
            </span>
            <span class="item">
              <span class="info">{{ item.score }}</span>
              <input type="number" class="ipt" v-model="item.score" />
            </span>
            <span class="item">
              <span class="info">{{ item.salary }}</span>
              <input type="number" class="ipt" v-model="item.salary" />
            </span>
            <span class="item">
              <!-- 显示修改按钮 -->
              <i class="upd" @click="showEdit(item.id)"></i>
              <!-- 删除 传id 舛讹 传了id就知道点击的是哪一个 -->
              <i class="del" @click="del(item.id)"></i>
              <!-- 因为双向绑定，修改input框的使用就修改了原来的值，点击确认按钮只需要去除样式就好了 -->
              <i class="yes" @click="currentId = ''"></i>
              <!-- 取消按钮 -->
              <i class="no" @click="cancel"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="item" id="up" ref="up"></div>
      <div class="item" id="down"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  // 自理解，通常是为  metheds  函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数）
  mounted() {
    // 柱状图
    this.RenderingBar();
    // 折线图
    this.RenderingLine();
  },
  data() {
    return {
      // 双向数据绑定输入框
      name: "",
      score: "",
      salary: "",
      // 保存id   保存之前的值
      currentId: "",
      currentName: "",
      currentScore: "",
      currentSalary: "",
      // 数据从本地获取，没有数据就获取空数组
      list: JSON.parse(localStorage.getItem("data")) || [],
    };
  },
  methods: {
    // 删除
    del(id) {
      // currentId有值就代表编辑样式生效中
      if (this.currentId !== "") {
        return alert("正在编辑中");
      }
      // 打印传过来的id
      console.log(id);
      // 遍历list数组  满足条件的留下（其他不等于的留下）  从新赋值给list数组
      this.list = this.list.filter(function (item) {
        return item.id !== id;
      });
    },
    // 添加
    add() {
      // 添加之前判断有无内容
      if (!this.name || !this.score || !this.salary) {
        return alert("请输入内容");
      }
      // 往数组添加数据
      this.list.push({
        // 确保唯一 来一个时间戳
        id: Date.now(),
        // 双向数据绑定的值赋值给这个对象
        name: this.name,
        score: this.score,
        salary: this.salary,
      });
      // 增加完成清空输入框
      this.name = "";
      this.score = "";
      this.salary = "";
    },
    // 显示修改按钮
    showEdit(id) {
      // currentId有值就代表编辑样式生效中
      if (this.currentId !== "") {
        return alert("正在编辑中");
      }
      // 点击按钮的时候   把点击按钮传过来的数  赋值给currentId   判断这两个数是否相同，相同就给样式
      this.currentId = id;
      // 点击显示修改按钮的时候 把当前那一栏的数据存起来
      let obj = this.list.find((item) => item.id === id);
      this.currentName = obj.name;
      this.currentScore = obj.score;
      this.currentSalary = obj.salary;
    },
    // 取消按钮     需要保存之前的值
    cancel() {
      // 取消时，把当前那一栏的值恢复成原来的值
      let obj = this.list.find((item) => this.currentId === item.id);
      obj.name = this.currentName;
      obj.score = this.currentScore;
      obj.salary = this.currentSalary;
      // currentId 不等于 id 样式就不会显示
      this.currentId = "";
    },
    // 渲染柱状图
    RenderingBar() {
      let myChart = echarts.init(this.$refs.up);
      let option = {
        title: {
          text: "评分图示",
          textStyle: {
            color: "white",
          },
        },
        xAxis: {
          type: "category",
          data: this.list.map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "评分图示",
            data: this.list.map((item) => item.score),
            type: "bar",
            itemStyle: {
              color: "skyblue",
            },
          },
        ],
        tooltip: {},
      };
      myChart.setOption(option);
    },
    // 渲染折线图
    RenderingLine() {
      let myCharts = echarts.init(document.querySelector("#down"));
      let option = {
        title: {
          text: "薪资图示",
          textStyle: {
            color: "white",
          },
        },
        xAxis: {
          type: "category",
          data: this.list.map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "薪资图示",
            data: this.list.map((item) => item.salary),
            type: "line",
            itemStyle: {
              color: "skyblue",
            },
          },
        ],
        tooltip: {},
      };
      myCharts.setOption(option);
    },
  },
  watch: {
    // 监听list
    list: {
      // 深度监听
      deep: true,
      // list发生变化后的值
      handler(value) {
        // 把值存在本地
        localStorage.setItem("data", JSON.stringify(value));
        // 数据发生变化重新调用渲染函数 重新渲染echarts
        this.RenderingBar();
        this.RenderingLine();
      },
    },
  },
};
</script>

<style>
</style>